<template>
  <div class="Login-conter">
    <form class="mui-input-group" ref="ruleForm">
      <div class="mui-input-row">
        <label>用户名</label>
        <input type="text" class="mui-input-clear" placeholder="请输入用户名" v-model="ruleForm.username">
      </div>
      <div class="mui-input-row">
        <label>密码</label>
        <input type="password" class="mui-input-password" placeholder="请输入密码" v-model="ruleForm.password">
      </div>
      <div class="mui-input-row">
        <label>验证码</label>
        <input type="text" class="mui-input-clear verify" placeholder="请输入验证码" v-model="ruleForm.verify">
        <img src alt class="verify-img">
      </div>
      <div class="mui-button-row">
        <button type="button" class="mui-btn mui-btn-primary login-left" @click="submitForm">确认</button>
        <button type="button" class="mui-btn mui-btn-danger login-right" @click="resetForm">取消</button>
      </div>
    </form>
  </div>
</template>

<script>
import {login} from '@/api';

export default {
  data() {
    return {
      ruleForm: {
        username: "",
        password: "",
        verify: ""
      }
    };
  },
  methods: {
      submitForm(){
          login(this.ruleForm).then(res=>{
            //   console.log(res,777);
            if (res.status == 200) {
              localStorage.setItem("mytoken", res.data.data.token);
              console.log(this,12311);
              
              this.$router.push("/myhome");
            }
              
          })
      },
      resetForm(){

      }
  },
};
</script>

<style lang="less" scoped>
.Login-conter {
  padding: 5px;
  .login-left {
    margin-right: 30px;
    width: 25%;
  }
  .login-right {
    width: 25%;
  }
  .verify {
    width: 40%;
    float: left;
  }
  .verify-img {
    float: right;
    width: 23%;
    height: 100%;
    background-color: pink;
  }
}
</style>
